<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>支付 | 机械配件商城</title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="./element-ui/index.css">
		<link rel="stylesheet" type="text/css" href="components/min-width-container.css" />
		<link rel="stylesheet" type="text/css" href="components/header-simple.css">
		<link rel="stylesheet" type="text/css" href="components/footer-bottom.css">
		<link rel="stylesheet" type="text/css" href="components/footer-image.css">
		<style>
			.app-content{
				width: 1000px;
				margin: auto;
				margin-top: 40px;
				margin-bottom: 20px;
			}
			
			.app-content-someinfo{
				display: flex;
				align-items: center;
			}
			
			.app-content-someinfo > div:nth-child(2){
				flex-grow: 1;
			}
			
			.app-content-pay{
				padding: 20px;
				border-top: 4px solid #B4B4B4;
				border-bottom:4px solid #B4B4B4;
				border-left: 2px solid #E5E5E5;
				border-right: 2px solid #E5E5E5;
			}
			
			.app-content-pay-alipay{
				border: 3px solid #7F9DD1;
				padding: 10px 20px;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			
			.app-content-pay-pastil{
				margin-top: 45px;
				margin-bottom: 25px;
			}
			
			.app-content-pay-password .el-input{
				width: 150px;
			}
			
			.app-content-pay-submit{
				margin-top: 30px;
				margin-bottom: 60px;
			}
			
			.app-content-pay-submit .el-button{
				width: 81px;
				height: 37px;
				padding: 0;
				text-align: center;
				line-height: 37px;
				background: #09AAEC;
			}
			
			
		</style>
	</head>
	<body>
		<div id="app">
			<header-simple></header-simple>
			<min-width-container>
				<div class="app-content">
					<div class="app-content-someinfo text-4 text-general-1">
						<div><img src="images/qrcode.jpg" width="102" height="102"/></div>
						<div class="m-l-20">
							<p>订单号: {{order.orderNo}}</p>
							<p class="m-t-16">卖家名称: 学者科技官方旗舰店</p>
						</div>
						<div class="text-1" style="color: #FE7E0C; font-weight: 900;">{{order.amount.toFixed(2)}}元</div>
					</div>
					
					<div class="app-content-pay m-t-16">
						<div class="app-content-pay-alipay text-4 text-general-1">
							<div class="app-content-pay-alipay-left">
								<el-radio v-model="radio" label="1"> <img src="images/支付宝.svg" width="20" height="20" style="vertical-align: middle;" /> 支付宝</el-radio>
							</div>
							<div class="app-content-pay-alipay-right">
								支付<span class="text-3" style="font-weight: 900; color: #FE7E0C;">{{order.amount.toFixed(2)}}</span>元
							</div>
						</div>
						<div class="app-content-pay-pastil text-general-1 text-3">
							支付宝支付密码:
						</div>
						<div class="app-content-pay-password">
							<el-input maxlength="6" v-model="input" show-password></el-input>
						</div>
						<div class="app-content-pay-pastip text-5 text-general-2 m-t-4">请输入6位支付密码</div>
						<div class="app-content-pay-submit">
							<el-button type="primary" @click="pay">确认付款</el-button>
						</div>
					</div>
				</div>
			</min-width-container>
			<footer-image></footer-image>
			<footer-bottom></footer-bottom>
		</div>
		<script src="./js/vue.js"></script>
		<script src="./js/axios.min.js"></script>
		<script src="./element-ui/index.js"></script>
		<script src="components/min-width-container.js"></script>
		<script src="components/header-simple.js"></script>
		<script src="components/footer-bottom.js"></script>
		<script src="components/footer-image.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data(){
					return {
						radio: '1',
						input: '',
						orderNo: '',
						order: {}
					}
				},
				created(){
					if(/^\?\d+$/.test(window.location.search)){
		        		const query = window.location.search.trim();
		        		this.orderNo = query.substring(1, query.length);
						const params = new URLSearchParams();
						params.append("orderNo", this.orderNo)
						axios.post("/order/getdetail.do", params).then(response=>{
							if(response.data.status === 0){
								this.order = response.data.data;
							}else{
								if(response.data.msg){
									console.log(response.data.msg);
								}
							}
						}).catch(err=>{
							console.log(err);
						});
		        	}else{
		        		this.$message.error("非法的访问");
		        	}
				},
				methods: {
					pay(){
						const params = new URLSearchParams();
						params.append("orderNo", this.orderNo);
						axios.post("/order/payreceipt.do", params).then(response=>{
							if(response.data.status === 0){
								this.$message({
									message: "支付成功",
									type: "success"
								});
								setTimeout(()=>{
									window.history.go(-1);
								}, 2000);
							}else{
								if(response.data.msg){
									this.$message.error(response.data.msg);
								}
							}
						}).catch(err=>{
							console.log(err);
							this.$message.error("连接服务器异常");
						});
					}
				}
			});
		</script>
	</body>
</html>
